<template>
  <el-card shadow="hover" :body-style="{ padding: '0' }" class="character-card">
    <div class="card-content">
      <!-- 删除按钮 -->
      <div class="delete-wrapper" v-if="showAdmin">
        <el-button 
          type="danger" 
          circle 
          class="delete-btn"
          @click.stop="handleDelete"
        >
          <el-icon><Delete /></el-icon>
        </el-button>
      </div>

      <!-- 角色图片 -->
      <div class="image-wrapper" @click="handleClick">
        <el-image 
          :src="image_url" 
          fit="cover" 
          class="character-image"
        >
          <template #error>
            <div class="image-error">
              <el-icon>
                <Picture />
              </el-icon>
            </div>
          </template>
        </el-image>
      </div>

      <!-- 角色名称 -->
      <div class="character-info">
        <h3 class="name">{{ name }}</h3>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ElCard, ElImage, ElIcon, ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Picture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { characterAPI } from '@/api/characters'

const props = defineProps({
  characterId: {
    type: Number,
    required: true
  },
  name: {
    type: String,
    required: true
  },
  image_url: {
    type: String,
    required: true
  },
  showAdmin: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['deleted'])
const router = useRouter()

// 查看详情
const handleClick = () => {
  router.push({
    name: 'character',
    params: { id: props.characterId }
  })
}

// 删除处理
const handleDelete = async () => {
  try {
    await ElMessageBox.confirm('确定要永久删除该角色吗？', '删除确认', {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'delete-confirm-box'
    })
    
    await characterAPI.deleteCharacter(props.characterId)
    ElMessage.success('删除成功')
    emit('deleted', props.characterId)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}
</script>

<style scoped>
.character-card {
  transition: transform 0.2s;
  margin-bottom: 16px;
  position: relative;
}

.character-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--el-box-shadow-light);
}

.delete-wrapper {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.delete-btn {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.delete-btn:hover {
  transform: scale(1.05);
}

.card-content {
  padding: 12px;
}

.image-wrapper {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  cursor: pointer;
}

.character-image {
  width: 100%;
  height: 240px;
  transition: transform 0.3s;
}

.character-image:hover {
  transform: scale(1.03);
}

.character-info {
  text-align: center;
  padding: 0 8px;
}

.name {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-placeholder);
  font-size: 32px;
}

:deep(.delete-confirm-box) {
  border: 2px solid #4A342C;
  box-shadow: 4px 4px 0 rgba(74, 52, 44, 0.2);
  
  .el-message-box__header {
    display: none;
  }
  
  .el-message-box__content {
    padding: 20px;
    font-family: 'Press Start 2P', cursive;
  }
  
  .el-message-box__btns {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    
    .el-button {
      border-radius: 0;
      padding: 8px 16px;
      min-width: 100px;
      
      &:last-child {
        background-color: #d32f2f;
        border-color: #d32f2f;
        color: white;
      }
    }
  }
}
</style>